@extends('common.base-master')

@section('html-head')
    <link rel="stylesheet" type="text/css" href="{{url('temple/css/details.css')}}">
@endsection

@section('html-body')
    <div class="all-wrap" style="margin-top: 88px;">
        <div class="head-fix">
            <!-- header黑色头部 -->
            <header class="clearfix">
                <div class="header-back fl">
                    <a href="javascript:goBack();"><span class="icon"></span></a>
                </div>
                <div class="detail-empty fl"></div>
                <div class="detail-title fl">
                    <div id="detailTitle">
                        <a href="#top" class="active">商品</a>
                        <a href="#idetail">详情</a>
                        <a href="#italk">评价</a>
                    </div>
                </div>
                <div class="detail-whitecar fl">
                    <a href="http://m.idx.com.cn/ShopCart"><span class="icon"></span></a>
                </div>
                <div class="header-more fr">
                    <span class="icon"></span>
                </div>
                <ul class="absolute detail-menu dnone">
                    <li class="detail-menu-home"><a href="http://m.idx.com.cn/"><span class="icon"></span>首页</a></li>
                    <li class="detail-menu-collect"><a href="http://m.idx.com.cn/Members/Collect/CollectGoodsList"><span class="icon"></span>我的收藏</a></li>

                </ul>
            </header>
        </div>
        <!-- Swiper -->
        <div class="swiper-container swiper-container-horizontal" id="swiper-1">
            <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-3000px, 0px, 0px);"><div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3" style="width: 750px;"><img src="{{url('temple/images/8e982d93-21c5-4618-9689-86ce9ed428f8.png')}}" alt=""></div>
                <div class="swiper-slide" data-swiper-slide-index="0" style="width: 750px;"><img src="{{url('temple/images/7ec377dd-bf56-4304-b3eb-ec5207b3a538.jpg')}}" alt=""></div>
                <div class="swiper-slide" data-swiper-slide-index="1" style="width: 750px;"><img src="{{url('temple/images/49aa5910-4b7a-4d02-a1fd-98988e0f2bc5.jpg')}}" alt=""></div>
                <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="2" style="width: 750px;"><img src="{{url('temple/images/db49f6d8-12e8-4770-9116-aa144107b899.jpg')}}" alt=""></div>
                <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="3" style="width: 750px;"><img src="{{url('temple/images/8e982d93-21c5-4618-9689-86ce9ed428f8.png')}}" alt=""></div>
                <div class="swiper-slide swiper-slide-duplicate swiper-slide-next" data-swiper-slide-index="0" style="width: 750px;"><img src="{{url('temple/images/7ec377dd-bf56-4304-b3eb-ec5207b3a538.jpg')}}" alt=""></div></div>
            <!-- Add Pagination -->
            <div class="swiper-pagination swiper-pagination-clickable" id="xi-dian1"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span></div>
        </div>
        <!-- 名称，价格，销量云云 -->
        <div class="detail-bref">
            <div class="detail-name">凌波微步 牛津布休闲鞋灰 男</div>
            <div class="detail-info clearfix">
                <div class="detail-other fr">

                    <span class="pr50">快递: 免邮</span>

                </div>
                <div class="detail-price fr">
                    <span class="price">￥299.00</span>
                </div>
            </div>
        </div>
        <!-- 促销，鞋码选择 -->
        <div class="detail-wrap bb32-wrap">

            <div class="detail-item clearfix">
                <a name="italk"></a>
                <div class="fl">选择: &nbsp;鞋码/颜色分类</div>
                <div id="detailAdd" class="more-t1 mr24-more fr">
                    <span class="icon"></span>
                </div>
            </div>
        </div>
        <!-- 商品评价 -->
        <a name="italk"></a>
        <div class="detail-wrap bb20-wrap">
            <div class="detail-item clearfix bb1-item">

                <div class="fl">商品评价(0)</div>
                <div class="more-t2 mr24-more fr">
                    <div class="check"><a href="http://m.idx.com.cn/Evaluate/Evaluate?pid=10001223">查看更多</a><span class="icon ml24-item"></span></div>
                </div>
            </div>

            <div class="evaluate">
                <div class="subscriber clearfix">
                    <div class="subscriber-a fl"><span class="head-portrait"><img src="http://img01.idx.com.cn/1/20170913/750097ce-9211-4468-9901-449a2c3ec5f0.png" alt=""></span></div>
                    <div class="subscriber-b fl"><span>python</span></div>
                    <div class="subscriber-c fl">
                        <span class="starA"></span>
                        <span class="starA"></span>
                        <span class="starA"></span>
                        <span class="starA"></span>
                        <span class="starA"></span>
                    </div>
                </div>
                <div class="time-y"><span class="times">2018.01.29</span><span class="yardage"></span></div>
                <div class="words">物流挺快的，包装不错，穿着还行吧，</div>
                <div class="photo clearfix">
                </div>
            </div>
        </div>
        <!-- 详情页 -->
        <div class="detail-lmg">
            <a name="idetail" class="xian"></a>
            <h3>商品详情</h3>
            <div class="full-width-pic">
                <div>
                    <img src="{{url('temple/images/98d03286-5b3c-4089-ae83-e4831981fdff.jpg')}}"></div>
                <div>
                    <div>
                        <img src="{{url('temple/images/6ca3719c-9eed-4ec1-805a-1021dd669c47.jpg')}}"></div>
                    <div>
                        <img src="{{url('temple/images/f8ad7868-64ee-4ae4-a246-377dfacc9f44.jpg')}}"></div>
                    <div>
                        <img src="{{url('temple/images/903370ee-b828-41c4-8ebb-6436ea79592a.jpg')}}"></div>
                    <div>
                        <img src="{{url('temple/images/01671830-c96c-43c3-86ff-be6876d10bbf.jpg')}}"></div>
                    <div>
                        <img src="{{url('temple/images/ba0fa822-c69d-4a61-b04a-cd1bd5a3f45c.jpg')}}"></div>
                    <div>
                        <img src="{{url('temple/images/7bf33cf2-17df-4a94-a1a6-7c4efb7f5f0a.jpg')}}">
                        <img src="{{url('temple/images/3824d4bd-06c9-4fdb-a9d3-88a31b603e7e.jpg')}}">
                    </div>
                    <div>
                        <img src="{{url('temple/images/0d7b0a65-ed9c-4482-b2e5-0081e769fac0.jpg')}}">
                        <img src="{{url('temple/images/24590e31-72df-4eb2-a60e-1e53a74783ab.jpg')}}">
                        <img src="{{url('temple/images/f0b5032d-ee08-4eb6-81f6-dca6ed55ea98.jpg')}}">
                    </div>
                </div>
                <p>
                    &nbsp;</p>

            </div>
        </div>
        <div><img src="{{url('temple/images/prides.png')}}" style="width:100%"></div>
        <div class="bb20pt32-empty"></div>
        <div class="detail-basket fixed dnone">
            <div class="absolute dnone">
                <div class="detail-basketBottom">
                    <div class="detail-basketInfo clearfix">
                        <div class="detail-productShoot fl relative">
                            <div class="absolute">
                                <img src="{{url('temple/images/7ec377dd-bf56-4304-b3eb-ec5207b3a538.jpg')}}">
                            </div>
                        </div>
                        <div class="fl detail-productInfo relative">
                            <p><span class="price">￥299.00</span></p>

                            <p><span class="detail-selected dnone">已选: </span><span class="detail-unselected">请选择 : 尺码</span></p>
                        </div>
                        <div id="basketCancel" class="fr detail-basketClose"><span class="icon"></span></div>
                    </div>
                    <div class="detail-choiceItem">
                        <p>尺码</p>
                        <div>
                            <span data-sizecode="S039">39</span>
                            <span data-sizecode="S040">40</span>
                            <span data-sizecode="S041">41</span>
                            <span data-sizecode="S042">42</span>
                            <span data-sizecode="S043">43</span>
                            <span data-sizecode="S044">44</span>
                        </div>
                    </div>
                    <div class="detail-choiceItem">
                        <p>尺码</p>
                        <div>
                            <span data-sizecode="S039">39</span>
                            <span data-sizecode="S040">40</span>
                            <span data-sizecode="S041">41</span>
                            <span data-sizecode="S042">42</span>
                            <span data-sizecode="S043">43</span>
                            <span data-sizecode="S044">44</span>
                        </div>
                    </div>
                    <div class="detail-prouctCount clearfix">
                        购买数量
                        <div class="fr">
                            <span class="detail-countReduce disable"></span><span class="detail-countAmount">1</span><span class="detail-countAdd"></span>
                        </div>
                    </div>
                </div>
                <div class="detail-basketButton">
                    <div class="detail-basketAdd" idx="add-shopcart">加入购物车</div>
                    <div class="detail-basketBuy" idx="add-order">立即购买</div>
                </div>
            </div>
        </div>
        <!-- 底部footer -->
        <div class="detail-cfooter clearfix">
            <div class="detail-service detail-w20">
                <a href="http://wpa.b.qq.com/cgi/wpa.php?ln=1&amp;key=XzkzODAzMTk0MV8yNjAyXzQwMDgyMTYzMTZfMl8" target="_blank">
                    <span class="icon"></span>
                    <p>客服</p>
                </a>
            </div>
            <div class="detail-collect detail-w20">
                <span class="icon"></span>
                <p>收藏</p>
            </div>
            <div class="detail-add detail-w30">加入购物车</div>
            <div class="detail-buy detail-w30">立即购买</div>
        </div>
        <div style="display:none;" idx="form-submit"></div>
        <input type="hidden" id="hidWorkId" value="10281785">
        <script src="{{url('temple/js/hm.js')}}"></script>
        <script src="{{url('temple/js/hm(1).js')}}"></script>

    </div>
    <script type="text/javascript" src="{{url('temple/js/jquery-1.7.2.js')}}"></script>
    <script type="text/javascript" src="{{url('temple/js/pub.js')}}"></script>
    <script type="text/javascript" src="{{url('temple/js/swiper.min.js')}}"></script>
    <script type="text/javascript" src="{{url('temple/js/dialog.js')}}"></script>
    <script type="text/javascript" src="{{url('temple/js/common.js')}}"></script>
    <script type="text/javascript">
        function goBack() {
            window.history.go(-1);
        }
    </script>

    <script type="text/javascript" src="{{url('temple/js/idxbase.js')}}"></script>

    {{--<script type="text/javascript" src="{{url('temple/js/commodity.js')}}"></script>--}}

    <script type="text/javascript">
        $(document).ready(function () {
            // 锚链接下划线效果
            $("#detailTitle a").on("touchstart", function () {
                $(this).addClass("active").siblings().removeClass("active")
            });
            // 弹出菜单栏目
            $(".header-more .icon").on("touchstart", function () {
                $(".detail-menu").toggle();
            });
            // 收藏按钮
            $(".detail-collect").on("touchstart", function () {
                if (idxbase.CheckLogin()) {
                    var workid = parseInt($("#hidWorkId").val());
                    $.ajax({
                        url: "/Commodity/AddCollectWork",
                        dataType: "text",
                        type: "get",
                        data: { WorkId: workid },
                        async: false,
                        success: function (data) {
                            if (data == "OK") {
                                $(".detail-collect").addClass("active")
                                messageBox.H5Dialog("收藏成功");
                            }
                            else if (data == "HasAdd") {
                                //messageBox.H5Dialog("已经收藏");
                                cancelCollect(workid);
                            }
                            else {
                                messageBox.H5Dialog("收藏失败");
                            }

                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(errorThrown);
                        }
                    });
                }
                else {
                    idxbase.GotoLogin();
                }
            });
            // 弹出购物篮子
            $(".detail-add,.detail-buy, #detailAdd").on("touchstart", function () {
                $(".detail-basket").show();
                $(".detail-basket > div").slideDown();
                $(".detail-cfooter").hide();
                clearInterval(bannerTimer);
            });
            $("#basketCancel").on("touchstart", function () {
                $(".detail-basket > div").slideUp();
                $(".detail-basket").fadeOut();
                $(".detail-cfooter").show();
                bannerTimer = setInterval(bannerLoop, 4000);
            });
            // 计数器
            $(".detail-countReduce").on("touchstart", function () {
                if ($(this).hasClass("disable")) {
                    return;
                }
                var qn = ".detail-countAmount";
                var q = !!parseInt($(qn).text()) ? parseInt($(qn).text()) : 1;
                if (q > 1) {
                    $(qn).text(q - 1);
                    if (q - 1 == 1) {
                        $(this).addClass("disable");
                    }
                } else {
                    return;
                }
            });
            $(".detail-countAdd").on("touchstart", function () {
                if ($(this).hasClass("disable")) {
                    return;
                }
                $(".detail-countReduce").removeClass("disable");
                var qn = ".detail-countAmount";
                var q = !!parseInt($(qn).text()) ? parseInt($(qn).text()) : 1;
                $(".detail-countAmount").text(q + 1);
            });
            // 已选状态
            $(".detail-choiceItem > div > span").on("touchstart", function () {
                if ($(this).hasClass("disable")) {
                    return;
                }
                $(this).addClass("active").siblings().removeClass("active");
                var selected = "已选:";
                var unselected = "请选择:"
                var qa = $(".detail-choiceItem div span.active");
                var qi = $(".detail-choiceItem p");
                for (var j = qi.length - 1; j > -1; j--) {
                    unselected += " " + $(qi).eq(j).text();
                }
                for (var i = 0; i < qa.length; i++) {
                    selected += " " + $(qa).eq(i).text();
                    var rp = " " + $(qa).eq(i).parent().parent().children("p").text();
                    unselected.replace(rp, "");
                }
                $(".detail-selected").removeClass("dnone").text(selected);
                $(".detail-unselected").text(unselected);
                $(".detail-unselected").hide();
            });

            //以下是轮播图初始化函数
            var swiper_1 = new Swiper('#swiper-1', {
                pagination: '#xi-dian1',
                paginationClickable: true,
                loop: true,
                autoplay: 3000,
            });
            var swiper_2 = new Swiper('#swiper-2', {
                pagination: '#xi-dian2',
                paginationClickable: true,
                loop: true,
                autoplay: 3000,
            });
            var swiper_3 = new Swiper('#swiper-3', {
                slidesPerView: 1.5,
                paginationClickable: true,
                spaceBetween: 5,
                freeMode: true
            });
            var swiper_4 = new Swiper('#swiper-4', {
                slidesPerView: 1.5,
                paginationClickable: true,
                spaceBetween: 5,
                freeMode: true
            });
            var swiper_41 = new Swiper('#swiper-41', {
                slidesPerView: 1.5,
                paginationClickable: true,
                spaceBetween: 5,
                freeMode: true
            });
            var swiper_42 = new Swiper('#swiper-42', {
                slidesPerView: 1.5,
                paginationClickable: true,
                spaceBetween: 5,
                freeMode: true
            });
            var swiper_5 = new Swiper('#swiper-5', {
                pagination: '#xi-dian5',
                paginationClickable: true,
                loop: true,
                autoplay: 3000,
            });
        });
    </script>
    <script type="text/javascript">
        (function ($) {
            var areaData = "";
            WorkSubmitData.CommodityId = '64791';
            WorkSubmitData.WorkId = '10281785';
            WorkSubmitData.ProductId = '10001223';
            WorkSubmitData.Sex = '1';
            WorkSubmitData.CategoryId = '10189';


        })(jQuery)

        function cancelCollect(workid) {
            $.ajax({
                url: "/Commodity/cancelCollectWork",
                dataType: "text",
                type: "get",
                data: { WorkId: workid },
                async: false,
                success: function (data) {
                    if (data == "OK") {
                        $(".detail-collect").removeClass("active");
                        messageBox.H5Dialog("取消成功");
                    }
                    else if (data == "HasCancel") {
                        messageBox.H5Dialog("已经取消收藏");
                    }
                    else {
                        messageBox.H5Dialog("收藏失败");
                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }
    </script>
@endsection